<template>
  <div class="setting-content inside-comment">
    <h2 class="setting-header">
        <strong>违规用户管理</strong>
    </h2>

    <RuifoxTable
      v-loading="tableLoading"
      v-model:tableData="tableData"
      :field-list="fieldList"
    >
      <template #status="{ element }">
        <div>
          <el-tag v-if="element.status == 1" type="warning">禁言</el-tag>
          <el-tag v-if="element.status == 2" type="danger">拉黑</el-tag>
          <el-tag v-if="element.status == 3" type="info">-</el-tag>
        </div>
      </template>
      <template #options="{ element }">
        <div class="table-td-option unmover">
          <el-button
            type="primary"
            link
            @click="relieveMuted(element)"
          >
            解除禁言
          </el-button>
          <el-button
            type="primary"
            link
            @click="relieveBlock(element)"
          >
            撤销黑名单
          </el-button>
        
        </div>
      </template>
    </RuifoxTable>
    <PaginationView
      :total="queryData.total"
      :pageSize="queryData.pageSize"
      :currentPage="queryData.currentPage"
      :allChoose="isAllChooseBtn"
      :pageChoose="isPageChooseBtn"
      :options="batchOptions"
      :checkedNum="checkedNum"
      :canChoose="queryData.total > 0"
      @changeSize="handleSizeChange"
      @currentChange="handleCurrentChange"
      @changePageChoose="handlePageChoose"
      @changeAllChoose="handleAllChoose"
      @invertChoose="handleInvertChoose"
      @checkOption="handleBatchOptions"
      @refreshList="handleGetFormManageList"
      @cancelChoose="handleResetPagination"
    />
  </div>
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue'
import { selectPageManagerMarkedUser } from '@/api/user'
import { tableList as mixTable } from "@ruifox-cms/utils";
import { unmuteManagerMarkedUser, unblockManagerMarkedUser } from '@/api/user'
import { ElMessage } from 'element-plus'

const {
  queryData,
  tableData: oriTableData,
  tableLoading,
  checkedNum,
  isAllChooseBtn,
  isPageChooseBtn,
  getTableData,
  //   handleSearch,
  handleCurrentChange,
  handleSizeChange,
  handlePageChoose,
  handleAllChoose,
  handleInvertChoose,
  // handleCheckTable,
  handleResetPagination,
} = mixTable({
  getListApi: selectPageManagerMarkedUser,
});

//查询违规用户
const defaultQuery = reactive({
  total: 10,
  currentPage: 1,
  pageSize: 10,
  // isMuted: "",
  // isBlack: ""
});
const tableData = ref([]);
Object.assign(queryData, defaultQuery);

const getUser = async () => {
  const res = await selectPageManagerMarkedUser(queryData)
  if (res.code == 20000) {
    oriTableData.value = res.data.list;
    tableData.value = res.data.list;
  }
}
getTableData();

//解除禁言
const relieveMuted = async (item) => {
  const res = await unmuteManagerMarkedUser({
    userId: item.userId,
  });
  if (res.code == 20000) {
    ElMessage.success("解除禁言成功");
    getUser();
  }
};

//取消拉黑
const relieveBlock = async (item) => {
  const res = await unblockManagerMarkedUser({
    userId: item.userId,
  });
  if (res.code == 20000) {
    getUser();
    ElMessage.success("取消拉黑成功");
  }
};

//表格展示字段
const fieldList = ref([
  {
    title: "用户名称",
    name: "username",
  },
  {
    title: "ip地址",
    name: "ipList",
  },
  {
    title: "标记次数",
    name: "markedCount",
  },
  {
    title: "当前状态",
    name: "status",
  },
  {
    title: "操作",
    name: "options",
    width: 200,
  },
]);

onMounted(async() => {
  await getUser()
});
</script>

<style scoped>
</style>
